<template>
  <div class="weeks">
    <div class="main clear">
      <div
        :class="['item', el.tigs]"
        v-for="el in monthData"
        :key="el.value"
        @click="monthClick(el)"
      >
        {{ getMonthI18n(el.value) }}
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator';
import { T_srv, Tsrv, ifs, ts, tvs } from './config';

@Component({
  components: {}
})
export default class pmMonths extends Vue {
  private monthData: any = [];

  // 当前日期
  private currDate: any = new Date();

  // 当前月
  private currMonth: number = new Date().getMonth() + 1;

  @Watch('currMonth')
  watchCurrMonth(newValue: number, oldValue: number) {
    this.monthData.forEach(element => {
      element.tigs = 'default';
    });
    for (const key of this.monthData) {
      if (key.months === newValue) {
        key.tigs = 'not';
        break;
      }
    }
  }

  created() {
    this.init();
  }

  mounted() {
    // this.$languageSetter.setLanguage('zh-CN');
  }

  private init() {
    this.initData();
  }

  monthClick(data: any) {
    this.monthData.forEach((d: any) => {
      d.tigs = d.months === data.months ? 'not' : 'default';
    });
    this.$emit('monthClick', data);
  }

  private getMonthI18n(v: string) {
    return this.$t(v);
  }

  private initData() {
    for (let i: number = 1; i <= 12; i++) {
      this.monthData.push({
        months: i,
        value: `i.datepicker.month${i}`,
        tigs: i === this.currMonth ? 'not' : 'default'
      });
    }
  }

  public setShowCurrMonth(num: number) {
    this.currMonth = num;
  }
}
</script>

<style lang="scss" scoped>
.weeks {
  position: relative;
  width: 100%;
  min-width: 250px;
  color: #1a202c;
  background-color: #fff;
  border: 1px solid;
  border-color: #cbd5e0;
  border-radius: 0.5rem;
  .header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 18px 0 18px;
    width: 100%;
    .title {
      font-size: 18px;
      color: #2d3748;
      font-weight: 600;
      line-height: 28px;
      user-select: none;
      white-space: nowrap;
    }
  }
  .toolbar {
    width: 100%;
    position: absolute;
    top: 0;
    display: flex;
    justify-content: space-between;
    padding: 8px 10px;
    pointer-events: none;
    .vc-arrow {
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      user-select: none;
      pointer-events: auto;
      color: #718096;
      border-width: 2px;
      border-style: solid;
      border-radius: 0.25rem;
      border-color: transparent;
    }
  }
  .main {
    padding: 15px 10px 20px;
    .item {
      width: 32%;
      margin-right: 2%;
      float: left;
      border-radius: 10px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      color: #2d3748;
      font-size: 13px;
      margin-bottom: 6px;
      user-select: none;
      cursor: pointer;
      border: 1px solid var(--default-border-color);
      &.repair {
        background-color: #ccccff;
      }
      &.not {
        background-color: #edf2f7;
        // background-color: #ffadad;
      }
      &.already {
        background-color: #8de7ed;
      }
      &:nth-child(3n) {
        margin-right: 0;
      }
      > b {
        display: inline-block;
        margin-right: 15px;
      }
      > em {
        display: inline-block;
        font-style: normal;
        margin-right: 15px;
      }
      > span {
        display: inline-block;
      }
    }
  }
}
</style>
